<!-- eslint-disable vue/multi-word-component-names -->
<script setup>
import ImageView from '@/components/ImageView/index.vue'
import { ref, onMounted } from 'vue';
import { useRoute } from 'vue-router';//获取当前路由
import { Gooddetail } from '@/apis/gooddetail';
const route = useRoute();
const goodId = route.params.id; 
const good=ref({})


const getDetail=async()=>{
   const res=await Gooddetail(goodId)
   good.value=res.data
}
onMounted(()=>getDetail())

 /*购买按钮处理啦*/
 
</script>

<template>
    <div class="coniater">
     <div class="goods-info">
        <div class="media">
            <ImageView :imageList="good.pictures" />
        </div>
        <div class="info">
            <h2>{{ good.name }}</h2>
            <div class="description-box">
                <p><strong>{{ good.desc }}</strong></p>
            </div>
            <p>价&nbsp;&nbsp;格: <strong class="price">¥{{ good.price }}</strong></p>
            <p>库&nbsp;&nbsp;存: <strong class="price">{{ good.stock }}</strong></p><!--库存样式没写，先用price的-->
            <!-- 购买按钮 -->
            <el-button  type="primary" @click="onPurchase" class="purchase-btn">
            购买
            </el-button>
        </div>
     </div>
     <div class="goods-detail">
        <div v-for="(item, index) in good.detail" :key="index">
            <p v-if="item.type === 'text' " class="text-box">{{ item.content }}</p> 
            <img v-if="item.type === 'image'" :src="item.content" alt="商品详情图片" />
            <video v-if="item.type === 'video'" :src="item.content" controls/>   
        </div>
     </div>
    </div>
</template>

<style scoped lang="scss">
.coniater {
        display: flex;
        flex-direction: column; /* 设置为竖直排列 */
        align-items: center;
        background-color: #fff;
        padding-top: 10px;
}
.goods-info {
        padding-top: 20px;
        min-height: 550px;
        width:920px;
        display: flex;
        box-shadow: inset 0 1px 3px rgba(98, 113, 128, 0.15);

        .media {
            width: 600px;
            height: 550px;
            padding: 30px 50px;
        }
        .info{
            padding-top: 30px;
            padding-right: 10px;
        }
        .price {
            color: #e53935;
            font-size: 1.5em;
            }
            .purchase-btn {
              font-size: 1.2em;
              width: 100%;
              padding: 12px 0;
              border-radius: 8px;
              background-color: #50c9c3;
              border: none;
        }

.purchase-btn:hover {
  background-color: #4e73df;
}
}
.goods-detail {
        padding: 30px;
        width:920px;
        display: flex;
        flex-direction: column;
        align-items: center;
        box-shadow: inset 0 1px 3px rgba(118, 136, 154, 0.15);
        .text-box {
          padding: 10px; 
          border-radius: 5px; 
          background-color: #f9f9f9; 
          height: 150px; 
          width: 800px;
          max-height: 250px; 
          overflow-y: auto; 
          word-wrap: break-word; 
          color: #333; 
}
      
}
.description-box {
  padding: 10px; /* 内边距 */
  background-color: #f9f9f9;; /* 背景颜色 */
  box-shadow: inset 0 1px 3px rgba(178, 204, 231, 0.15); /* 阴影 */
  border-radius: 5px; /* 圆角 */
  max-height: 300px; /* 最大高度 */
  max-width: 300px;
  overflow-y: auto; /* 超出内容显示滚动条 */
  word-wrap: break-word; /* 自动换行 */
  color: #565353; /* 字体颜色，可以根据需要调整 */
}
.goods-detail video{

    width:800px;
    height:auto;
}
.goods-detail image {
    width: 800px; 
    height: auto; 
}
</style>